<template>
	<view class="container">
		<view class="card">
			<view class="name">名称</view>
			<view class="item flex-row">
				<view class="label">位置：</view>
				<text>{{ form.position_name || '' }}</text>
			</view>
			<view class="item flex-row">
				<view class="label">负责人：</view>
				<text>{{ form.response_man_name || '' }}</text>
			</view>
			<view class="item flex-row" style="border-bottom: 2upx solid #dedede;padding-bottom: 10upx;margin-bottom: 20upx;">
				<view class="label">物品数量：</view>
				<text>{{ form.goods_num || 0 }}</text>
			</view>
			<view class="title">
				<view class="name">应急物资</view>
			</view>
			<view class="list">
				<view v-for="(item, index) in list" :key="index" class="list-item">
					<view class="item flex-row half">
						<view>物品：{{ item.name || '' }}</view>
						<view>数量：{{ item.num || 0 }}</view>
					</view>
					<view @click="showMethod(index)" class="btn">点击查看使用方法</view>
				</view>
			</view>
		</view>
		<!--弹窗-->
		<uni-popup ref="method" type="center">
			<view id="popup">
				<view class="popup-body">{{ content }}</view>
				<view class="popup-foot">
					<view @click="confirm">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default{
	components: { uniPopup },
	data(){
		return {
			form: {},
			list: [],
			content: ''
		}
	},
	onLoad(){
		this.form = uni.getStorageSync('emergencyMaterialDetail') || {};
		this.list = this.form.goods_detail ? JSON.parse(this.form.goods_detail) : [];
	},
	onBackPress(){
		uni.removeStorageSync('emergencyMaterialDetail');
	},
	methods: {
		// 查看使用方法
		showMethod(index){
			this.$refs.method.open();
			this.content = this.list[index].how_use;
		},
		// 确定
		confirm(){
			this.$refs.method.close();
			this.content = '';
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
	overflow-y: auto;
}

.flex-row{
	justify-content: flex-start;
}

/*弹窗*/
#popup{
	width: 560upx;
	height: 600upx;
	background: #fff;
	border-radius: 20upx;
}
#popup .popup-foot{
	text-align: center;
	height: 100upx;
	line-height: 100upx;
	box-sizing: border-box;
	border-top: 2upx solid #ddd;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
#popup .popup-foot view{
	width: 100%;
	height: 100%;
	font-size: 32upx;
	line-height: 100upx;
}
#popup .popup-foot view:last-child{
	color: #007AFF;
}
#popup .popup-body{
	overflow-y: auto;
	box-sizing: border-box;
	padding: 40upx 30upx 0;
	height: calc(100% - 100upx);
}

/*卡片*/
.card{
	background: #fff;
	margin: 20upx;
	border-radius: 16upx;
	padding: 14upx 20upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
	position: relative;
}
.card .title{
	margin-bottom: 20upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item.half view{
	width: 50%;
}
.card .item view{
	font-size: 28upx;
	line-height: 1.6;
}
.card .item view.label{
	width: 160upx;
}
.card .name{
	font-size: 28upx;
	font-weight: bold;
}

.btn{
	color: #fff;
	width: 240upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	margin: 20upx 0;
	text-align: center;
	background-color: #33CC00;
}
</style>
